@import "compass/css3";
@import "compass/reset";

body {	
	font-size: 0.75em; /* 12/16 */
	font-family: Helvetica, Arial, Tahoma, sans-serif;
	line-height: 150%;
	width: 100%;	
	margin: 0 auto;	
	position: relative;		
}

h1 {
	font-size: 2em; /* 24/12 */
	margin-bottom: 1em;
	line-height: 150%;
}

h2 {
	font-size: 1.75em; /* 21/12 */
	margin-bottom: 0.875em;
}

h3 {
	font-size: 1.5em; /* 18/12 */
	margin-bottom: 0.75em;
}

h4 {
	font-size: 1.333em; /* 16/12 */
}

h5 {
	font-size: 1.666667em; /* 14/12 */
}

h6 {
	font-size: 1em; /* 12/12 */
}

p {
	max-width: 30.75em;
	margin-bottom: 1em;
}

ul {
	margin-bottom: 1em;
}

a {
	text-decoration: none;
	font-weight: bold;
}

em {
	font-style: italic;
}

strong {
	font-weight: bold;
}

label {
	display: inline;
	font-weight: bold;
}

.s-error {
	display: inline;
	
	font-weight: bold;
	color: #f00;
}

header {
	margin-bottom: 1em;
	padding: 5%; 
	z-index: 10;
	overflow: auto;
	
	a {
		border: 0;
	}
	
	#logo  {				
		width: 40%;
		float: left;
		
		img {
			width: 100%;
		}
	}	
	
	ul {
		float: right;
	}
	
	li {
		display: inline-block;
		margin-left: 1em;
	}
}

section, fieldset {
	margin-bottom: 2em;
}

.nav {	
	width: auto;
	position: relative;
	display: block;		

	li {
		width: auto;			

		a {
			display: block;
			width: auto;
			
			padding: 0.75em 1em; 
			
			border: 0;
			
			&:after {
				display: inline-block;
				float: right;				
			}
		}
		
		ul {
			margin: 0;
		}

	}
}

#primary .nav {
	position: relative;
	
	li {
		width: 23%;
		display: inline-block;
		margin: 0 auto;  
		text-align: center;		
		
		a {
			padding: auto 1em;
		}
	}
}

#primary .nav > li:hover > ul {
  display: block;
}

#primary .nav li ul {
	display:none;
	position: absolute;
	bottom:100%;
	left: 2.5%;  
	width: 95%;
	border-radius: 0.833em 0.833em 0em 0em;
}

#primary .nav li ul li {	
	width: 100%;
	text-align: left;
	
	&:first-child {
		border-radius: 0.833em 0.833em 0em 0em;
	}
}

#secondary { 	
	margin: 1em auto 1.5em auto;
		
	li:first-child {
		border-radius: 0.833em 0.833em 0em 0em;	 
		a {
			border-radius: 0.733em 0.733em 0em 0em;	 
		}
		
		ul a {
			border-radius: 0;
		}
	}
	
	li:last-child {
		border-radius: 0em 0em 0.833em 0.833em;	 
		
		a {
			border-radius: 0em 0em 0.733em 0.733em;	 
		}
		
		ul  {
			a {
				border-radius: 0;
			}
			li:last-child, li:last-child a {
				border-radius: 0em 0em 0.733em 0.733em;	 
			}
		}		
	} 	
}

#secondary.nav li:first-child:last-child {
	border-radius: 0.833em;	 
	a {
		border-radius: 0.733em;	 
	}
}
 

footer #secondary {
	width: 90%;
}

.stack {
	display: block;
	width: auto;
	margin: -0.5em auto 1em auto;
	
	padding: 0.75em 1em;
		
	border-radius: 0.833em;
	
	&:after {
		display: inline-block;
		float: right;				
	}	
} 

input, label{
	display: block;
}

input[type="submit"], .buttons .button, li a.button  {
	display: block;
	width: 100%;
	margin:0.833em 0;	
	padding: 0.833em 1.667em; 	
	min-height:  3.667em; 
	
	font-size: 1.167em;
	
	border-radius: 0.833em;	
	-webkit-border-radius: 0.8333333em;
	
	cursor: pointer;
}

input[type="text"], input[type= "email"], input[type="tel"], input[type= "password"], input[type= "number"], input[type="search"], select, option, textarea {
	width: 96%;	
	padding: 3% 2%;
	
	border-radius: 0.33em;
	-webkit-border-radius: 0.333em;	
		
	font-size: 1.3333333em;
}

select, option {
	width: 100%;
}

input[type="checkbox"], input[type="radio"] {
	display: inline-block;
}

input[type="number"] {
	width: 50%;
}

textarea {
	width: 96%;
	
	border-radius: 0.333em;
	-webkit-border-radius: 0.333em;	
}

form li {
	margin-bottom: 1em;
}

address {
	strong, span {
		display: block;
	}
}

footer {
	margin-top: 2em;
	
	ul {
		margin: 1em 0;		
	}
}

.tools  {
	width: 90%;
	margin: 1em auto;
	overflow: auto;
	
	li{
		display: inline-block;
		text-align: center;
		
		&:first-child {
			float: left;
		}
		
		&:last-child {
			float: right;
		}
	}
}

li a.button {	
	width: auto;	
	height: 2.5em;
		
	line-height: 300%;	
	font-size: inherit;
	font-weight: regular;
	text-align: center;	
}

#settings {	
	padding: 0 5%;
	margin-bottom: 1em;
	overflow: auto;	
	
	form {
		width: 45%;	
		
		&:first-child {
			float: left;
		}
		
		&:last-child {
			float: right;
		}
	}
}

#welcome {
	display:block;
	width: auto;
	text-align: center;
}

#breadcrumbs li {
	display: inline;	
}

.product-list li {
	margin: 1em 0.125em 2em;
	img {
		float:left;
		margin-right: 0.5em;
	}	
}

#images>a img {
	width: 100%;
}

#main, #search {
	display: block;
	
	width: 90%;
	
	padding: 0 5%;
	
	position: relative;

}

.inline-form {
	overflow: auto;
	position: relative;
	
	fieldset {		
		width: 100%;
		display: block;
		
		position: relative;
		
	}
	
	input[type="text"], input[type="search"], select {
		width: 73%;
		
		margin:0 2% 0 0;
		
		float: left;
	}
	
	input[type="submit"] {			
		width: 20%;		
		min-height: 100%; 
		font-size: inherit;
		line-height: 1.66666667em;
		
		padding: 3% 2%;
		
		margin:0;	
	}	
}

.module {
	margin: 2em 0em;
}

.m-cart {
	@extend .module;	
}

.featured {
	ul {
		overflow: auto;
	}
	
	li {
		/* width:100%;  */
		overflow: auto;
		clear: right;
		
		img {
			width: 45%;
			margin-right: 5%;
			float: left;
		}
	}

	.two-columns li, .three-columns li{
		text-align: center;
		margin: 0 5% 5% 0;
		position: relative;			
		float: left;		
		
		img {
			width: 100%;
			display: block;
		}
	}
	
	.three-columns li {
		width: 27%;
	}
	
	.two-columns li {
		width: 45%;
	}	

}


.category-info {
	margin-bottom: 5%;
	overflow: auto;
	
	img {
		float: left;
		margin-right: 5%;
	}
}

.category-list {
	margin-bottom: 5%;
	
	ul {
		width: 90%;
		padding: 5%;
	}	
}

.warning, .stock, .success, .attention {
	margin: 1em 0;
	padding: 3%;
	
	font-weight: bold;
}

.image {
	width: 30%;
	float: left;
	margin-right: 5%;
	clear: bottom;
	
	img {	
		width: 100%;
	}
	
	a {
		border: 0;
	}
}

.cart-total {
	float:right;
	li {
		text-align: right;
	}
}

.cart-info {
	li {
		overflow: auto;
		&>div {
			margin-left:35%;
			&.image {
				margin-left: 0;
			}
		}
	}
}

.shipping_price {
	float: right;
}

.buttons {	
	display: block;
	/* width: 100%; 	 */
	width: auto;
	overflow: visible;
	clear: both;
	
	&:after {
	   content: ".";
	   visibility: hidden;
	   display: block;
	   height: 0;
	   clear: both;
	}
	
	/* margin-bottom: 3em; */
	
	.button {
		display: inline-block;
		width: 30%;		
		padding: auto 3%;		
		
		&:first-child {			
			float: left;
			margin-left: -6%;
			border-radius:  0 0.833em 0.833em 0;			
		}
		
		&:last-child {
			float: right;
			margin-right: -6%;
			border-radius:   0.833em 0 0 0.833em;			
		}
	}
}

.s-error {

	&:before {
		content: ".";
		display: block;
		clear: both;
		visibility: hidden;
		line-height: 0;
		height: 0;
	}
	
	display: block;
}

.checkout-heading {
	padding: 0.5em;
	padding-left: 6.5%;
	
	margin-left: -6.5%;
	margin-bottom: 1em;
	
	line-height: 2em;
	text-transform: uppercase;
	font-weight: bold;
	
	border-radius: 0 0.25em 0.25em 0;
	
	overflow: auto;
	
	a {
		display: inline-block;
		float:right;
		padding: 0.25em 0.33em;
		border-radius: 0.25em;	
		min-width: 5em;
		line-height: 1.33em;
	}
}

/* Order confirmation styles */
.checkout-product, .order-product{
	width: 100%;
	
	margin-bottom: 1.5em;
	
	th {
		font-weight: bold;
	}
	
	thead th.total, th.quantity {
		text-align: right;
	}
	
	td, th {
		padding: 1em;
	}
	
	tfoot tr:first-child>*{
		padding-top: 1em;		
	}
	
	tfoot th {
		text-align: right;
	}
	tfoot th, tfoot td{
		padding: 0.5em 1em 0.5em 1em;
	}
		
	tbody {
		margin-bottom: 1em;
	}
	
	.name {
		min-width: 40%;
	}
	
	.model {
		display: block;
		font-style: italic;
	}
	
	.price {
		text-align: right;
		display: block;
		margin-top: 0.5em;
	}
	
	.quantity {
		text-align: right;
		margin-right: 1em;
		max-width: 3em;
		vertical-align: bottom;
	}
	
	.total {		
		width: auto;
		text-align: right;
		vertical-align: bottom;
	}
}

.order-item{
	margin-bottom: 2.5em;
	
	.order-id {	
		margin-bottom: 0;
		float: left;
	}

	.button{
		display: block;
		line-height: 3em;
		text-align: center;
		padding: 0.5em;	
		border-radius: 0.833em;				
	}
	
	.order-status {		
		margin-bottom: 0.5em;
		display: block;
		float: right;
		border-radius: 1em;
		/* line-height: 2em; */
		padding: 0.125em 0.5em;
	}	
}

.order-content, .order-detail, .order-address {
	width: 100%;	
	margin-bottom: 0.75em;
	
	td, th {
		padding: 0.25em 0;
	}
	
	th {
		font-weight: bold;
		padding-left: 1em;
	}
}	

.order-address {
	td {
		padding-left: 1em;
	}
}
/* 
==============================
		Theming 
		Colors, border colors, 
		backgrounds, icons, symbols
		all can be found below.
==============================
*/
header {
	background: #003366;

	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#42aaff),
		to(#003366));
	
	background: -o-linear-gradient(
		top, rgb(66, 170, 255), rgb(0, 51, 102));
	
	background: -o-linear-gradient(bottom, #006353, #00715e, #c7dad6);

	color: #FFF;
	
	a {
		color: #FFF;
	}	
}

#primary .nav { 				
	background: #144169;
	
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#437db0),
		to(#144169));
	
	border-top: 0.1em solid #C9D9E7;
	& > a {
		color: #FFF;
		text-shadow: 0.1em 0.1em 0.1em #444;
	}

}

#primary .nav > li {
	background: none;	
	border: 0.1em solid rgba(0,0,0,0);
	border-top: 0;
	border-bottom: 0;

	&:hover {
		border-right: 0.1em solid rgba(215, 215, 215, 0.5);
		border-left: 0.1em solid rgba(45, 45, 45, 0.5);			
	}
	
	a:after {
		display: none;
	}
	
	ul {		
		box-shadow: 0em -0.5em 0.5em -0.5em #333;
		border: 0.1em solid #C9D9E7; 
		border-top: 0.1em solid #FAFAFA;
		border-bottom: 0;
		
		background: #437db0;
		background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#437db0),
		to(#144169));
			
		li {
			background: none;	
			/* border: 0.1em solid #C9D9E7;*/
			border:none;
			border-bottom: 0.1em solid rgba(15,15,15,0.3);			
			border-top: 0.1em solid rgba(215,215,215,0.3);			 
			
				
			& a {
				background: none;
				border: 0;
				color: #F0F0F0;
				/* text-shadow:  0.1em 0.1em 0.1em #C9D9E7;  */
			}
			
			&:last-child {
				border-bottom: 0;
			} 
		}		
	}
}

#primary .nav > li > a {
  padding:  3.9em 0 1em;
  
  background-image: url('../images/sprite.svg');
  -webkit-background-size: 3.125em 54.495em;
  -o-background-size: 3.125em 54.495em;
  background-size: 3.125em 54.495em;
  background-repeat: no-repeat;
  font-size: 0.75em;
  color: #FFF;  
}

.no-svg #primary .nav > li > a {
	background-image: url('../images/sprite.png');
	-webkit-background-size: 2.875em 45.25em;
	-o-background-size: 2.875em 45.25em;
	background-size: 2.875em 45.25em;
}

/* Icon positioning from sprite */
.n-home {
  background-position: center -16.2em;
}				

.n-info {
  background-position: center -24.8em;
}

.n-account {
  background-position: center -33.48em;
}

.n-contact {
  background-position: center -41.8em;
}									

#primary .nav > li:hover {
  background: #144169;
  background: -webkit-gradient(linear, left top, left bottom, from(#144169), to(#235d90));
}


#secondary { 	
	li{
		border: 0.1em solid #3F698D;
		border-bottom: 0;
		border-top: 0;
		
		&:first-child {
			border-top: 0.1em solid #3F698D;
			
		}
		
		&:last-child {
			border-bottom: 0.1em solid #3F698D;			
			background: #437db0;
		
			ul li:last-child {
				border-bottom: 0;
			}
		}

		ul {
			li {
				border: 0;				
				
				&:first-child {
					border-top: 0.1em solid #31628c;
					border-radius: 0;
				}
				
				&:last-child {
					border-bottom: 0.1em solid #77abd9;
					border-radius: 0;
				}				
			}
			
			li:first-child a, li:last-child a{																
					border-radius: 0;				
			}	
			
			a {
				background: #4d7ea8;

				background: -webkit-gradient(
					linear, left top, left bottom, 
					from(#41719c),
					to(#4d7ea8));	
				
				text-shadow: 0em 0em 0.1em #555;				
			}				
		}		
	}		
	
	a {
		background: #6298c7;

		background: -webkit-gradient(
			linear, left top, left bottom, 
			from(#6298c7),
			to(#437db0));					
		
		color: #EEE;
		text-shadow: 0.1em 0.1em 0.3em #000;
		
	}	
}

.stack {
	background: #6298c7;

	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#6298c7),
		to(#437db0));	
	
	border: 0.1em solid #3F698D;
	
	box-shadow: 
		0em 0.1em 0em 0em #497AA5,
		0em 0.2em 0em 0em #3F698D,
		0em 0.3em 0em 0em #47769F,
		0em 0.4em 0em 0em #3F698D;			
		
	&:hover {
		box-shadow: 
			0em 0.2em 0em 0em #497AA5,
			0em 0.3em 0em 0em #3F698D,
			0em 0.4em 0em 0em #47769F,
			0em 0.5em 0em 0em #3F698D;
	}
} 

input[type="submit"], .buttons .button, .order-item .button, .button {
	border: 0.1em solid #517aa3;
	
	background: #003366;

	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#42aaff),
		to(#003366));
	
	background-image: -o-linear-gradient(
		top, rgb(66, 170, 255), rgb(0, 51, 102));
		
	-webkit-box-shadow:
		0 0.1em 0.3em rgba(000,000,000,0.5),
		inset 0 0.1em 0.1em rgba(255,255,255,0.6);
		
	text-shadow:
		0 -0.1em 0 rgba(000,000,000,0.7),
		0 0.1em 0 rgba(255,255,255,0.3);

	color: #FFF;
}

.disabled {
	border-color: #7a7a7a;
	
	background: #333;

	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#a0a0a0),
		to(#333));
	
	background-image: -o-linear-gradient(
		top, rgb(160, 160, 160), rgb(51, 51, 51));		
}

input[type="text"], input[type= "email"], input[type="tel"], input[type= "password"], input[type= "number"], input[type= "search"], select, option, textarea {
	border: 0.1em solid #517aa3;
	box-shadow: inset 0.1em 0.1em 0.3em #ccc; 
}

input[type="search"] {
	-webkit-appearance: none;
}

.inline-form {
	input[type="submit"] {					
		box-shadow: none;
		-webkit-box-shadow: none;
	}	
}


.warning, .stock, .success, .attention {
	border: 0.3em solid orange;
	
	background : #993344;
	color: #FFF;
	
	font-weight: bold;
}

.warning {
	border-color: #A11;
	background: #E33;
}

.success {
	border-color: #090;
	background: #0A0;
}

.attention {
	border-color: #AA0;
	background: #FF0;
	color: #000;
}

.checkout-content {	
	opacity: 0;	
	transition: opacity 1s ease-in;	
	-webkit-transition: opacity 1s ease-in; /* Safari and Chrome */
	-o-transition: opacity 2s; /* Opera */
}

.checkout-heading {		
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#6298c7),
		to(#437db0));	
	
	border: 0.1em solid #3F698D;
	-webkit-box-shadow:		
		inset 0 0.1em 0.1em rgba(255,255,255,0.6);
		
	text-shadow:
		0 -0.1em 0 rgba(000,000,000,0.7),
		0 0.1em 0 rgba(255,255,255,0.3);
		
	color: #FFF;
	
	a {
		text-transform:capitalize;
		
		background: -webkit-gradient(
				linear, left top, left bottom, 
				from(#437db0),
				to(#6298c7));	
			
		border: 0.1em solid #3F698D;
		
		-webkit-box-shadow:		
			inset 0 0.1em 0.1em rgba(0,0,0,0.6);
			
		text-shadow:
			0 -0.1em 0 rgba(000,000,000,0.7),
			0 0.1em 0 rgba(255,255,255,0.3);
			
		color: #EFEFEF;		
	}
}
/* Order confirmation styles */
.checkout-product, .order-product{
	tbody {		
		tr:nth-child(odd) td{
			background: #F2F2F2;		
		}
	}
}

.order-status {
	background: #E0E0F1
}

.order-content, .order-detail {
	tr:nth-child(even) {
		background: #F4F2F2;		
		/* background: #E0E0F1; */
	}
}
/* Navigation */
.nav a:after, .stack:after{
	border-radius: 2em;
	background: rgba(0,0,0,0.1);
	box-shadow: inset 0em 0.1em 0.1em 0em rgba(0,0,0,0.3),
	0em 0.1em 0.1em 0em rgba(255,255,255,0.3);	
	padding: 0.5em;	
	margin-top: -0.25em;
	content: '\25B6';
	text-shadow: none;	
	line-height: 1em;	
}				

